<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-button :plain="true" @click="open1">消息</el-button>
        <el-button :plain="true" @click="open2">成功</el-button>
        <el-button :plain="true" @click="open3">警告</el-button>
        <el-button :plain="true" @click="open4">错误</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="3">
        <el-button @click="open5">消息提示</el-button>
      </el-col>
      <el-col :span="3">
        <el-button @click="open6">删除文件</el-button>
      </el-col>
      <el-col :span="3">
        <el-button @click="open7">消息栏</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data(){
    return{

    }
  },
  methods:{
    open1() {
      this.$message({
        showClose: true,
        message: '这是一条消息提示'
      });
    },

    open2() {
      this.$message({
        showClose: true,
        message: '恭喜你，这是一条成功消息',
        type: 'success'
      });
    },

    open3() {
      this.$message({
        showClose: true,
        message: '警告哦，这是一条警告消息',
        type: 'warning'
      });
    },

    open4() {
      this.$message({
        showClose: true,
        message: '错了哦，这是一条错误消息',
        type: 'error'
      });
    },

    open5(){
      this.$alert('这是一段内容', '标题名称', {
        confirmButtonText: '确定',
        callback: action => {
          this.$message({
            type: 'info',
            message: `action: ${ action }`
          });
        }
      });
    },
    open6() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    open7() {
      this.$notify({
        title: '成功',
        message: '这是一条成功的提示消息',
        type: 'info'
      });
    },

  }
}
</script>

<style scoped>
.el-row,h4{
  margin-top: 20px;
}
</style>